<template>
	<view>
		<view class="content publicBox" v-for="(item1,index1) in ScrollList" :key="index1" @click="clickPage(item1.id)">
			<!-- 左边 -->
			<view class="left">
				<u-icon name="photo-fill" size="75" v-if="!getImgaeUrl(item1.pictureRoute)"></u-icon>
				<my-image v-else :imageUrl="getImgaeUrl(item1.pictureRoute)" imgHeight="80" imgWidth="85"></my-image>
				<!-- <image :src="getImgaeUrl(item1.pictureRoute)" v-else></image> -->
			</view>
			<!-- 右边 -->
			<view class="right">
				<!-- 区域 -->
				<view class="activityName ellipsis beyond">{{param.title=='日常清洁'?item1.regionName:item1.equipmentPosition}}</view>
				<!-- 时间 -->
				<view class="startTime">{{item1.time?(item1.time.length==10?item1.time+' 00:00:00':item1.time):''}}</view>
				<!-- 说明 -->
				<view class="activityContent beyond towLines">{{item1.patrolContent}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			ScrollList:{
				type:Array,
				require:true,
			},
			param:{
				type:Object,
			}
		},
		data(){
			return{}
		},
		computed:{
			getImgaeUrl(){
				return function(array){
					if(this.param.name=='日常清洁'){
						return array.length>0?array[0].url:''
					}else{
						if(typeof array =='string'){
							return JSON.parse(array).length>0?JSON.parse(array)[0].url:''
						}
						return array.length>0?array[0].url:''
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.content{
	padding:10px;
	display:flex;
	box-sizing: border-box;
	// 左边
	.left{
		height:80px;
		width:85px;
		overflow: hidden;
		// image{
		// 	height:100%;
		// 	width:100%;
		// }
	}
		// 右边
	.right{
		width:495rpx;
		display:flex;
		flex-direction: column;
		font-size: 24rpx;
		color:#cdcdcd;
		margin-left:15rpx;
		// 标题
		.activityName{
			font-size:32rpx;
			font-weight: 800;
			color:#000;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		// 内容
		.activityContent{
			margin:5px 0
		}
		//时间
		.startTime{
			margin-top:5px;
		}
	}
}
</style>